Рисование линейки ProgressBar

---

пример: barg.zip

Каждый пользователь много раз видел линейку ProgressBar при выполнении программ установки. Если вы не знаете, как это реализовано, то я постараюсь вам помочь.

Условимся что, мы не будем использовать стандартный ProgressBar, а попробуем нарисовать свой. Для примера попробуем нарисовать ProgressBar на панели StatusBar. Компонент StatusBar не является контейнером, т. е. на него нельзя положить другой компонент, но он позволяет пользователю нарисовать себя.

Линейка условно состоит из двух прямоугольников.

Первый - это заполненый прямоугольник соответствующий проценту выполнения. Второй - это фон для выделения заполненой части. Рисуем линейку за два шага. Первым рисуем прямоугольник незаполненной части, вторым заполненной.

Чтобы получить эффект перехода заполненной части линейки через текст воспользуемся методом Canvas.TextRect. Этот метод рисует текст внутри заданного прямоугольника. У него есть три характеристики позволяющие получить желаемый эффект.

1. Область прямоугольника заполняется цветом текущей кисти.
2. Текст выходящий за пределы прямоугольника отсекается.
3. Текст можно расположить в любом месте прямоугольника задав координаты X и Y.

procedure TForm1.StatusBar1DrawPanel(StatusBar: TStatusBar;
  Panel: TStatusPanel; const Rect: TRect);
var s: String;
    TH: Integer;
    Rec: TRect;
    X: Integer;
    Y: Integer;
begin
  S := Format('%u%%',[Percent]);
  TH := (Rect.Right - Rect.Left) * Percent div 100;
  X := ((Rect.Right - Rect.Left) +
       StatusBar.Canvas.Font.Height * Length(s)) div 2;
  Y := ((Rect.Bottom - Rect.Top)-
       (StatusBar.Canvas.Font.size div 2))  div 2 ;
  StatusBar1.Canvas.Brush.Color := clWhite;
  Rec := Classes.Rect(Th,Rect.Top,Rect.Right,Rect.Bottom);
  StatusBar.Canvas.TextRect(Rec,x,y,s);
  {рисование не заполненной части линейки}
  StatusBar.Canvas.Font.Color := StatusBar.Canvas.Brush.Color;
  StatusBar.Canvas.Brush.Color :=  clNavy;
  Rec := Classes.Rect(Rect.Left,Rect.Top,TH,Rect.Bottom);
  StatusBar.Canvas.TextRect(Rec,x,y,S);
  {рисование не заполненной части линейки}
end;

Как это работает можно посмотреть запустив пример